<template>
  <view class="savepadding">
    <u-form ref="uform" label-width="auto">
      <u-form-item>
        <u-icon name="order" color="#1573FF" label="车辆信息" label-color="#333333"></u-icon>
      </u-form-item>
      <u-form-item label="车牌号" @click="clickChooseCar" borderBottom>
        <u-input v-model="allocationInfo.carPlate" inputAlign="right" placeholder="请选择"
                 disabled disabledColor="#ffffff" border="none"
                 type="select"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="车架号" :required="true" @click="clickChooseCar" borderBottom>
        <u-input v-model="allocationInfo.vin" inputAlign="right" placeholder="请选择"
                 disabled disabledColor="#ffffff" border="none"
                 type="select"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="品牌/车系/车型" borderBottom>
        <u-input v-model="allocationInfo.carInfo" inputAlign="right" disabled="true" disabledColor="#ffffff"
                 border="none" placeholder="自动获取"></u-input>
      </u-form-item>

      <u-form-item label="仓库名称" borderBottom>
        <u-input v-model="allocationInfo.warehouseNameOld" inputAlign="right" disabled="true" disabledColor="#ffffff"
                 border="none" placeholder="自动获取"></u-input>
      </u-form-item>

      <u-form-item label="车辆归属" borderBottom>
        <u-input v-model="allocationInfo.transferDeptNameOld" inputAlign="right" disabled="true" disabledColor="#ffffff"
                 border="none" placeholder="自动获取"></u-input>
      </u-form-item>

      <u-form-item label="入库时间">
        <u-input v-model="allocationInfo.storageTime" inputAlign="right" disabled="true" disabledColor="#ffffff"
                 border="none" placeholder="自动获取"></u-input>
      </u-form-item>
    </u-form>

    <u-form ref="uform" label-width="auto">
      <u-form-item>
        <u-icon name="order" color="#1573FF" label="移库信息" label-color="#333333"></u-icon>
      </u-form-item>
      <u-form-item label="移库原因" :required="true" @click="pickerShow(1)" borderBottom>
        <u-input v-model="allocationInfo.transferReason" inputAlign="right" placeholder="请选择"
                 disabled disabledColor="#ffffff" border="none"
                 type="select"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="目的仓库" :required="true" @click="pickerShow(2)" borderBottom>
        <u-input v-model="allocationInfo.warehouseName"
                 disabled disabledColor="#ffffff" border="none"
                 inputAlign="right" placeholder="请选择" type="select"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="目的归属" :required="true" @click="clickCarDept()" borderBottom>
        <u-input v-model="allocationInfo.transferDeptName"
                 disabled disabledColor="#ffffff" border="none"
                 inputAlign="right" placeholder="请选择" type="select"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="移库时间" :required="true" @click="pickerShow(3)" borderBottom>
        <u-input v-model="allocationInfo.transferTime"
                 disabled disabledColor="#ffffff" border="none"
                 inputAlign="right" placeholder="请选择" type="select"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="移库人员" :required="true" borderBottom>
        <u-input v-model="allocationInfo.transferPersonnel" border="none" inputAlign="right"
                 placeholder="请输入"></u-input>
      </u-form-item>

      <u-form-item label="移库备注">
        <u-input v-model="allocationInfo.remarks" border="none" inputAlign="right" placeholder="请输入"
                 type="textarea"></u-input>
      </u-form-item>

    </u-form>

    <view style="height: 130rpx;"></view>

    <view class="button-container">
      <button class="btn-item" @click="commit">提交</button>
    </view>

    <!-- 移库原因 -->
    <u-picker :show="transferReasonShow" :columns="transferReasonList" keyName="value"
              @confirm="pickerConfim" @cancel="transferReasonShow=false"></u-picker>

    <!-- <u-picker :mode="mode" v-model="transferReasonShow" :default-selector="[0]" :range="transferReasonList"
      range-key="value" @confirm="pickerConfim()"></u-picker> -->

    <!-- 车辆仓库 -->
    <u-picker :show="carWarehouseShow" :columns="carWarehouseList" keyName="warehouseName"
              @confirm="pickerConfim" @cancel="carWarehouseShow=false"></u-picker>

    <!-- <u-picker :mode="mode" v-model="carWarehouseShow" :default-selector="[0]" :range="carWarehouseList"
      range-key="warehouseName" @confirm="pickerConfim()"></u-picker> -->

    <!-- 移库时间 -->
    <u-datetime-picker :show="moveHouseDateShow" mode="date"
                       @confirm="timeconfirm" @cancel="moveHouseDateShow=false"></u-datetime-picker>
    <!-- <u-picker :mode="mode" v-model="moveHouseDateShow" @confirm="pickerConfim()"></u-picker> -->
    <!-- 车辆归属 -->
    <gljyDataPicker class="deptPicker" ref="picker" :idkey="'deptId'" :isSuper="true" namekey="deptName"
                    :childrenkey="'subDeptList'"
                    :title="'请选择'" :initList="deptList" @itemOnclick="itemOnclickDept">
    </gljyDataPicker>


    <u-modal ref="uModal" :show="showModal" :show-cancel-button="true" show-title="" @confirm="confirm"
             content="确定提交？" @cancel="showModal=false">
      <!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
      <!-- <view class="warp" style="margin: 30rpx;" v-if="contentSlot">
      <image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;"
        mode="widthFix"></image>
    </view> -->
      <!-- #endif -->
    </u-modal>

  </view>
</template>

<script>
import gljyDataPicker from "@/components/gljy-data-picker/gljy-data-picker.vue";

export default {
  components: {
    gljyDataPicker
  },
  data() {
    return {

      type: 0,
      mode: 'time',

      transferReasonShow: false,
      transferReasonList: [],

      carWarehouseShow: false,
      carWarehouseList: [],

      deptList: [],

      moveHouseDateShow: false,
      showModal: false,
      allocationInfo: {
        carPlate: String,
        carId: String,
        vin: '',
        carInfo: String,
        warehouseIdOld: String,
        warehouseNameOld: String,
        transferDeptIdOld: String,
        transferDeptNameOld: String,
        storageTime: String,
        transferReason: '',
        warehouseId: String,
        warehouseName: '',
        transferDeptName: '',
        transferDeptId: String,
        transferTime: '',
        transferPersonnel: '',
        remarks: String

      }
    }
  },

  onLoad() {
    this.transferReasonList = [this.$store.state.params.getCarCommon.transferReason];
    this.carWarehouseList = [this.$store.state.params.warehouseList];
    this.getDeptList();
  },

  methods: {
    //选择车辆
    clickChooseCar() {
      uni.navigateTo({
        url: 'car-carlist'
      })
    },

    //picker是否显示
    pickerShow(type) {
      switch (type) {
        case 1:
          this.transferReasonShow = true;
          this.mode = 'selector';
          break
        case 2:
          this.carWarehouseShow = true;
          this.mode = 'selector';
          break
        case 3:
          this.moveHouseDateShow = true;
          this.mode = 'time';
          break
      }
      this.type = type;
    },

    timeconfirm(e) {
      let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');

      switch (this.type) {
        case 3: //发证时间
          this.moveHouseDateShow = false;
          this.allocationInfo.transferTime = timeStr;
          break
      }
    },

    //picker回调函数
    pickerConfim(e) {
      // if (this.mode == 'time') { //时间格式
      // 	let timeStr = e.year + '-' + e.month + '-' + e.day;
      // 	switch (this.type) {
      // 		case 3: //发证时间
      // 			this.allocationInfo.transferTime = timeStr;
      // 			break
      // 	}
      // } else if (this.mode == 'selector') { //自定义格式
      // let index = e;
      switch (this.type) {
        case 1: //移库原因
          this.transferReasonShow = false;
          // let objc1 = this.transferReasonList[index];
          let objc1 = e.value[0];
          this.allocationInfo.transferReason = objc1.value;
          break

        case 2: //目的仓库
          this.carWarehouseShow = false;
          // let objc2 = this.carWarehouseList[index];
          let objc2 = e.value[0];
          this.allocationInfo.warehouseId = objc2.warehouseId;
          this.allocationInfo.warehouseName = objc2.warehouseName;
          break
      }
      // }
    },

    //获取车辆归属数据
    getDeptList() {
      this.$u.api.getCommonDeptlist({
        type: '2'
      }).then(res => {
        this.deptList = res;
      })
    },
    //显示车辆归属组件
    clickCarDept() {
      this.$refs.picker._show();
    },
    //车辆归属选择回调事件
    itemOnclickDept(res) {
      this.allocationInfo.transferDeptName = res.deptName;
      this.allocationInfo.transferDeptId = res.deptId;
    },

    //提交
    commit() {

      let that = this

      if (this.$u.test.isEmpty(this.allocationInfo.vin)) {
        this.$u.toast('请选择车辆');
        return;
      } else if (this.$u.test.isEmpty(this.allocationInfo.transferReason)) {
        this.$u.toast('请选择移库原因');
        return;
      } else if (this.$u.test.isEmpty(this.allocationInfo.warehouseName)) {
        this.$u.toast('请选择目的仓库');
        return;
      } else if (this.$u.test.isEmpty(this.allocationInfo.transferDeptName)) {
        this.$u.toast('请选择目的归属');
        return;
      } else if (this.$u.test.isEmpty(this.allocationInfo.transferTime)) {
        this.$u.toast('请选择移库时间');
        return;
      } else if (this.$u.test.isEmpty(this.allocationInfo.transferPersonnel)) {
        this.$u.toast('请输入移库人员');
        return;
      } else {
        // this.showModal = true;
        uni.showModal({
          content: '确定提交吗?',
          success(res) {
            if (res.confirm) {

              that.$u.api.saveTransfers(that.allocationInfo).then(
                  res => {
                    uni.showToast({
                      title: '提交成功',
                      icon: 'none'
                    });

                    uni.$emit('trans', true)

                    setTimeout(() => {
                      uni.navigateBack()
                    }, 1000)

                  }
              );

            }
          }
        })

      }

    },

    confirm() {
      this.$u.api.saveTransfers(this.allocationInfo).then(
          res => {
            uni.showToast({
              title: '提交成功',
              icon: 'none'
            });
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          }
      );
    },
  }
}
</script>

<style lang="scss">

.u-form {
  margin: 10px;
  padding: 22rpx;
  background-color: $xz-bgColor-write;
  border-radius: 16rpx;
}

.u-input {
  font-size: 24rpx;
}

.bottom {
  position: fixed;
  width: 100%;
  height: 120rpx;
  bottom: 0;
  z-index: 999;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  color: $xz-textColor-FF;

}

.bottom-add {
  width: 90%;
  line-height: 88rpx;
  border-radius: 44rpx;
  background-color: $xz-bgColor-blue;
  color: $xz-textColor-FF;
  font-size: 30rpx;
  margin: 11rpx;

}

.deptPicker {
  position: fixed;
  z-index: 9999;
}
</style>
